@use "@/styles/common.module.scss"as *;
$tab_bar_height: 35px;

.tab_bar {
  position     : relative;
  height       : $tab_bar_height;
  max-height   : $tab_bar_height;
  min-height   : $tab_bar_height;
  box-sizing   : border-box;
  display      : flex;
  margin-bottom: -1px;
  overflow-x   : auto;
  overflow-y   : hidden;
  z-index      : $z_idx_editor_view_tab_bar;

  /* 隐藏默认的滚动条样式 */
  scrollbar-width   : none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  &::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, and Opera */
  }

  .tab_delimiter {
    z-index       : $z_idx_editor_view_tab_bar_delimiter;
    width         : 0px;
    height        : 100%;
    position      : relative;
    opacity       : 0px;
    pointer-events: none;
    opacity       : 0;
    transition    : opacity 200ms;

    &::after {
      content         : '';
      height          : 100%;
      width           : 2px;
      left            : -1px;
      background-color: #0078d4;
      position        : absolute;
    }

    &:first-child::after {
      left: 0px;
    }
  }
}

.tab_bar_more_button {
  position               : absolute;
  right                  : 0px;
  top                    : 0px;
  width                  : calc($tab_bar_height / 2);
  height                 : $tab_bar_height;
  z-index                : calc($z_idx_editor_view_tab_bar + 1);
  border                 : 1px solid var(--view-border-color-normal);
  border-bottom          : 0px;
  border-top-left-radius : 5px;
  border-top-right-radius: 5px;
  padding                : 0px;
  transition             : background-color 200ms;
  background-color       : var(--view-bg-color-normal);

  &:hover {
    background-color: var(--view-fg-color-normal);
    z-index         : $z_idx_editor_view_tab_bar_btn_hover;
  }
}